<!-- parents-info-page  -->
<template>
  <div class="content has_breadcrumb">
    <base-breadcrumb
      :data="[
        {
          routeName: 'parents',
          name: 'parents',
        },
        {
          name: 'Ada Yeo',
        },
      ]"
      slot="breadcrumb"
    />
    <GgPage pageType="2" title="parents">
      <template v-slot:left>
        <gg-flex-menus
          :menus="menuDatas"
          @select="menuSelect"
          :default-active="activeIndex"
        />
      </template>

      <!-- test -->
      <router-link to="connections">connections go go go go</router-link>

      <gg-page-header
        title="Ado Yao"
        :menuData="['Reset password']"
        @menuCallback="() => {}"
      >
        <template v-slot:info>
          <div class="info">
            <div class="status">Active</div>
            <div class="time">
              Created <span>20/02/2020</span> Last sign in:<span
                >13/02/2020 13:20</span
              >
            </div>
          </div>
        </template>
      </gg-page-header>

      <div class="wraper">
        <div class="avatar-con">
          <div class="borderless-left">Photo</div>
          <head-img
            class="user-box"
            :src="avatar"
            line-height="88"
            @click="() => {}"
          ></head-img>
        </div>
        <border-less-table :data="borderLessData"></border-less-table>
      </div>
    </GgPage>
    <BaseFormDialog
      v-model="isShowBaseFormDialog"
      title="Standard form"
      :data="data4"
      @submit="submit"
      textReminder="* indicates a required field"
      userReminder="Maximum 8 students allowed for each class."
      :renderPass="renderPass"
    >
      <template slot="renderHtml" slot-scope="scope">
        <!-- <gg-input
          v-if="scope.data.key == 'phoneNo1'"
          :key="scope.data.key"
          :ref="scope.data.key"
          :placeholder="scope.data.placeholder"
          v-model="scope.data.value"
          :error="{ show: true, message: scope.data.errorText }"
        ></gg-input>
        <gg-input
          v-else-if="scope.data.key == 'phoneNo2'"
          :key="scope.data.key"
          :ref="scope.data.key"
          :placeholder="scope.data.placeholder"
          v-model="scope.data.value"
          :error="{ show: true, message: scope.data.errorText }"
        ></gg-input>
        <gg-input
          v-else-if="scope.data.key == 'phoneNo3'"
          :key="scope.data.key"
          :ref="scope.data.key"
          :placeholder="scope.data.placeholder"
          v-model="scope.data.value"
          :error="{ show: true, message: scope.data.errorText }"
        ></gg-input>
        <PhoneNumber
          v-else-if="scope.data.key == 'phoneNo4'"
          v-model="scope.data.value"
          :ref="scope.data.key"
        ></PhoneNumber> -->
        <PhoneNumber
          v-if="scope.data.key == 'phoneNo4'"
          v-model="scope.data.value"
          :ref="scope.data.key"
        ></PhoneNumber>
        <PhoneNumber
          v-if="scope.data.key == 'phoneNo5'"
          v-model="scope.data.value"
          :ref="scope.data.key"
        ></PhoneNumber>
        <!-- <base-gg-select placeholder="dddd"></base-gg-select> -->
      </template>
    </BaseFormDialog>
  </div>
</template>

<script>
export default {
  name: "parentsInfo",
  data() {
    return {
      renderPass: true,
      slotValue: {
        PhoneNumber1: {
          value: {
            countryCode: "+65",
            phoneNumber: "1234556",
          },
        },
        PhoneNumber2: {
          value: {
            countryCode: "+65",
            phoneNumber: "1234556",
          },
        },
      },
      slotData: ["phoneNo4", "phoneNo5"],
      ageValue: "ƒ2222",
      phoneData: {
        countryCode: "+65",
        phoneNumber: "1234556",
      },
      menuDatas: [
        {
          name: "Parent Info ",
          key: "parentsInfo",
          active: true,
          children: [],
        },
        {
          name: "Connections",
          key: "connections",
          children: [],
        },
      ],
      activeIndex: "parentsInfo",
      borderLessData: [
        { label: "First Name", value: "xxx xxx" },
        { label: "Last Name", value: "xxx xxx" },
        { label: "Email", value: "xxx" },
        { label: "Phone", value: "xxxxxx" },
        { label: "Job title", value: "xxx" },
        { label: "Working type", value: "xxx" },
      ],
      avatar:
        "https://edoovo-hk.oss-accelerate.aliyuncs.com/uat_avatar/2020-09-11/bd537d11fcbf4c398c047d377a62d681-130423902631638220815238764789965073975.png",
      isShowBaseFormDialog: true,
      data4: [
        {
          placeholder: "name *",
          key: "name",
          value: "",
          reg: /^[\S]{2,4}$/,
          errorText: "名字为2-4个字，不含有空格",
        },
        {
          placeholder: "phoneNo1",
          key: "phoneNo1",
          value: "",
          reg: /^[\S]{3,5}$/,
          errorText: "电话为3-5个字，不含有空格",
        },
        {
          placeholder: "phoneNo2",
          key: "phoneNo2",
          float: true,
          value: "",
          reg: /^[\S]{3,5}$/,
          errorText: "电话为3-5个字，不含有空格",
        },
        {
          placeholder: "phoneNo3",
          key: "phoneNo3",
          value: "",
          reg: /^[\S]{3,5}$/,
          errorText: "电话为3-5个字，不含有空格",
        },
        {
          placeholder: "phoneNo4",
          key: "phoneNo4",
          value: {
            countryCode: "+65",
            phoneNumber: "1234556",
          },
          renderHtml: true,
        },
        {
          placeholder: "phoneNo5",
          key: "phoneNo5",
          value: {
            countryCode: "+65",
            phoneNumber: "",
          },
          renderHtml: true,
        },
      ],
    };
  },
  watch: {
    data4: {
      handler() {
        this.renderPass = this.slotData.every((item) => {
          return this.$refs[item].isError && !this.$refs[item].isError.show;
        });
        console.log("renderPass:", this.renderPass);
      },
      deep: true,
    },
  },
  methods: {
    menuSelect(key, item) {
      console.log(key, item);
      this.activeIndex = key;
      this.$router.push(`/${key}`);
    },
    submit(a, b) {
      console.log(a, b);
    },
  },
  created() {},
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类

.avatar-con {
  display: flex;
  box-sizing: border-box;
  padding: 20px;
  background-color: #fff;
  width: 492px;
  .borderless-left {
    margin-right: 20px;
    min-width: 140px;
    max-width: 220px;
    font-family: Roboto;
    font-size: 14px;
    font-weight: 500;
    color: #202124;
  }
}
.info {
  color: #b4b4b4;
  font-size: 14px;
  font-family: Roboto;
  .status {
    color: #0b8043;
  }
}
</style>